<template>
  <div>
    <div>
      <el-select
        v-model="value"
        placeholder="请选择"
        style="width:120px; margin: 5px 0 5px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="width:200px"
      ></el-input>
      <el-button
        type="success"
        icon="el-icon-search"
        style="width: 90px; margin-left: 10px"
        @click="queryMaster(value, input)"
        >搜索</el-button
      >
      <el-button
        icon="el-icon-plus"
        type="primary"
        style="width:120px;float:right"
        @click="onhandAdd()"
        >添加宠物主</el-button
      >
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="masterId" label="编号" width="50">
      </el-table-column>
      <el-table-column prop="masterNickname" label="昵称" width="100">
      </el-table-column>
      <el-table-column label="头像" prop="masterImages">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.masterImages"
            fit="cover"
          ></el-image>
          <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
          <!-- <img :src="scope.row.masterImager" alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src="scope.row.masterImager" style="width: 30px;height: 30px"> -->
          <!-- </el-popover> -->
        </template>
      </el-table-column>
      <el-table-column prop="masterName" label="真实姓名" width="100">
      </el-table-column>
      <el-table-column prop="masterTel" label="电话" width="100">
      </el-table-column>
      <el-table-column prop="masterAddress" label="地址" width="120">
      </el-table-column>
      <el-table-column prop="masterArea" label="送货地址" width="120">
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            icon="el-icon-edit"
            style="width:70px;"
            @click="onhandupdata(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="info"
            icon="el-icon-search"
            style="width:90px;"
            @click="onhandShow(scope.$index, scope.row)"
            >查看宠物</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            style="width:70px;"
            @click.prevent="deleteRow(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增编辑弹框 -->
    <el-dialog :title="selectById" :visible.sync="dialogVisible" width="40%">
      <el-form
        :model="master"
        ref="refRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="id" style="width:200px;">
          <el-input v-model="master.masterName"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="master.masterNickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="master.masterTel"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            :action="url"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="master.masterAddress"></el-input>
        </el-form-item>
        <el-form-item label="送货地址">
          <el-input v-model="master.masterArea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="add()">确定添加</el-button>
        <el-button type="primary" @click="updata()">确定修改</el-button>
      </span>
    </el-dialog>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageNo"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
    <Modal v-show="isLoading"
      ><Center><Loading v-show="isLoading"/></Center
    ></Modal>
  </div>
</template>

<script>
import { getMaster } from "@/services/MasterService.js";
import { deleteMaster } from "@/services/MasterService.js";
import { addMaster } from "@/services/MasterService.js";
import { showMaster } from "@/services/MasterService.js";
import { updataMaster } from "@/services/MasterService.js";

import Loading from "@/components/Loading.vue";
import Modal from "@/components/Modal.vue";
import Center from "@/components/Center.vue";
export default {
  components: { Loading, Modal, Center },
  methods: {
    onhandShow(index, row) {
      // console.log(index,row);
      this.$router.push({
        name: "Pet",
        // params: {
        //   id: this.$route.params.id,
        // },
        query: {
          masterId: row.masterId,
          masterName: row.masterName,
        },
      });
    },
    async tableList() {
      var resp = await getMaster(null, null, this.pageNo, this.pageSize);
      console.log("=====+++++====");
      console.log(resp);
      this.tableData = resp.data.list;
      console.log(this.tableData[0].masterImages);
      this.total = resp.data.total;
    },
    async handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.tableList();
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.tableList();
    },
    async onhandupdata(row) {
      this.dialogVisible = true;
      console.log(this.master.masterId);
      var resp = await showMaster(row.masterId);
      console.log(resp);
      this.master = resp.data;
    },
    async updata() {
      console.log(this.master);
      var resp = await updataMaster(this.master);
      if (resp.data === true) {
        location.reload();
        this.$message.success("修改成功");
      } else {
        this.$message.error("修改失败");
      }
      this.dialogVisible = false;
    },
    onhandAdd() {
      this.dialogVisible = true;
    },
    async add() {
      var resp = await addMaster(this.master);
      this.dialogVisible = false;
      console.log(this.master);
      if (resp.data === true) {
        location.reload();
        this.$message.success("添加成功");
      } else {
        this.$message.error("添加失败");
      }
    },
    async deleteRow(index, row) {
      console.log(row.masterId);
      this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let resp = await deleteMaster(row.masterId);
          if (resp.data === true) {
            location.reload();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async queryMaster(value, input) {
      var resp = await getMaster(value, input, this.pageNo, this.pageSize);
      console.log(value, input);
      this.tableData = resp.data.list;
      console.log(this.tableData);
    },
    handleAvatarSuccess(res, file) {
      console.log("=================");
      console.log(res);
      console.log(file);
      this.master.masterImages = res.data.path;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },

  async created() {
    this.isLoading = true;
    setTimeout(() => {
      this.tableList();
      this.isLoading = false;
    }, 200);
  },

  data() {
    return {
      isLoading: false,
      url: "/api/pet_sys/upload.do",
      imageUrl: "",
      tableData: [],
      options: [
        {
          value: "1",
          label: "昵称",
        },
        {
          value: "2",
          label: "真实姓名",
        },
        {
          value: "3",
          label: "手机号",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      value: "",
      index: "",
      input: "",
      selectById: "添加宠物主",
      dialogVisible: false,
      master: {
        masterId: "",
        masterName: "",
        masterNickname: "",
        masterTel: "",
        masterImages: "",
        masterAddress: "",
        masterArea: "",
      },
      total: 0,
      pageNo: 1,
      pageSize: 4,
    };
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
